<html>
<#include "../common/header.ftl" />

</head>
<script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.js"></script>
<style type="text/css">
body {
	background: url(static/image/news.jpg) no-repeat;
	background-size: 100% 100%;
	background-attachment: fixed;
	height: auto;
}

.container {
	background: rgba(0, 0, 0, 0);
	position: relative;
	right: 82px;
	top: 114px;
	/* -moz-box-shadow: 6px 6px 6px #333232;
	-webkit-box-shadow: 6px 6px 6px #333232;
	box-shadow: 6px 6px 6px #333232; */
	/* For IE 8 */
	/* filter: alpha(opacity = 50);
	-moz-opacity: 0.5;
	opacity: 0.5; */
}

.column {
	-moz-box-shadow: 6px 6px 6px #333232;
	-webkit-box-shadow: 6px 6px 6px #333232;
	box-shadow: 6px 6px 6px #333232;
}

#username:hover {
	transition: 0.8s;
	opacity: .8;
	-webkit-transform: scale(1.07);
	-moz-transform: scale(1.07) transform: scale(1.07);
	-moz-box-shadow: 6px 6px 6px #333232;
	-webkit-box-shadow: 6px 6px 6px #333232;
	box-shadow: 6px 6px 6px #1790c9;
}

#password:hover {
	transition: 0.8s;
	opacity: .8;
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05) transform: scale(1.05);
	-moz-box-shadow: 6px 6px 6px #333232;
	-webkit-box-shadow: 6px 6px 6px #333232;
	box-shadow: 6px 6px 6px #1790c9;
}

#password:focus {
	transition: 0.8s;
	opacity: .8;
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05) transform: scale(1.05);
	-moz-box-shadow: 6px 6px 6px #333232;
	-webkit-box-shadow: 6px 6px 6px #333232;
	box-shadow: 6px 6px 6px #1790c9;
}

.page-header h2 {
	color: white;
}

.page-header h2:hover {
	transition: 0.8s;
	color: black;
}
</style>
<script type="text/javascript">
	$(function() {
		$('#login').on('click', function() {
			if (($("#username").val().trim()) == '') {
				tip('账号不可为空！');
				return;
			}
			if (($("#password").val().trim()) == '') {
				tip('密码不可为空！');
				return;
			}
			let obj = {};
			obj.username = $("#username").val().trim();
			obj.password = $("#password").val().trim();

			$.ajax({
				url : "login?method=login",
				type : "POST",
				data : JSON.stringify(obj),
				scriptCharset : 'utf-8',
				contentType : "application/json; charset=utf-8",
				success : function(res) {
					let data = JSON.parse(res)
					if (data.code === 0) {
						location.href = ('index')
					}
					else{
						tip(data.msg)
					}
				},
				error : function(res) {
					tip(res);
					location.href = ('login')
				}
			});
			console.log('data', $('form').serializeArray())
		})
	});
	function tip (msg){
		$("#warn").text(msg)
		$("#modal-282051").click()
	}
</script>
<body>
 <a id="modal-282051" href="#modal-warns" style="display:none" role="button" class="" data-toggle="modal"></a>
	<div class="container"
		style="width: 48%; min-width: 300px; margin: 0 auto; padding-left: 65px; max-width: 880px">
		<#include "../modal/tips.ftl" />
		<div class="row clearfix" style="min-width: 300px;">
			<div class="col-md-9 column"
				style="height: 400px; min-width: 300px; background: rgba(0, 0, 0, 0);">
				<div class="page-header"
					style="background: rgba(0, 0, 0, 0); min-width: 300px">
					<h2>
						ZZU IOTLAB<small style="padding-left: 20px"><i>Admin System</i></small>
					</h2>
				</div>
				<form role="form" action="" method="post">
					<div class="form-group">
						<input id="username" type="text" placeholder="用户名"
							class="form-control" name="username" />
					</div>
					<br />
					<div class="form-group">
						<input id="password" type="password" placeholder="密码"
							class="form-control" name="password" />
					</div>
					<br />
					<div style="float: right; position: relative; top: 55px; left: 5px">
						<button id="login" type="button" class="btn btn-primary btn-lg">登录</button>
						<a id="login" href="index" class="btn btn-primary btn-lg">一睹为快！</a>
					</div>
				</form>
			</div>
		</div>
	</div>
</body>
<script src="static/js/3.1.0bootstrap.min.js"></script>
</html>
